
<template>
    <h3>第 7 章以来案例一览</h3>
    <span
    >当前导航展示了动态组件（component）的用法，点击导航按钮可以切换不同的案例</span
    ><br />
    <button
    v-for="(_, tab) in tabs"
    :key="tab"
    :class="['tab-button', { active: currentTab === tab }]"
     @click="currentTab = tab"
     >
     {{ tab }}
     </button>

     <hr />
     <component :is="tabs[currentTab]" class="tab"></component>
     </template>
    
     <script setup>
     import { ref } from 'vue'
     import Login from './Login.vue'
     import Todolist from './Todolist.vue'
     import Game from './Game.vue'
    
     // 设置默认激活的案例
     const currentTab = ref('App722')
    
     // 把案例组件组织为 tabs 对象
     const tabs = {
        Login,
        Todolist,
        Game,
   
     }
     </script>